<template>
  <div class="container">
    <div class="logo">
      <div class="img">
        <a href=""><img src="../assets/logo.png" /></a>
      </div>
      <div class="font_tushuguan">
        <h3 class="shadow_tu">长 院 图 书 馆</h3>
      </div>
      <div class="btn">
        <el-button type="primary" round @click="goTo"
          >登录</el-button
        >
        <el-button type="primary" round>注册</el-button>
      </div>
      
      <!-- nav -->
      <div class="nav">
        <el-tabs @tab-click="handle">
          <el-tab-pane label="首页" name="first"></el-tab-pane>
          <el-tab-pane label="读者指南" name="second"> </el-tab-pane>
          <el-tab-pane label="规章制度" name="third"></el-tab-pane>
          <el-tab-pane label="关于" name="fourth"></el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },

 


  methods: {
    handle(tab, event) {
      switch (tab.name) {
        case "first":
          this.$router.push("/index");
          break;
        case "second":
          this.$router.push("/zhinan");
          break;
        case "third":
          this.$router.push("/zhidu");
          break;
        case "fourth":
          this.$router.push("/guanyu");
          break;
      }
    },
    goTo() {
      this.$router.push("/login");
    }
   
  },
}
</script>


<style >
body {
  width: 100%;
}
.container {
  position: relative;
  width: 100%;
  height: 120px;
  background-color: #aa0018;
}
.container .logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 80px;
  width: 100%;
  background: #aa0018;
  position: relative;
}
.container .logo img {
  position: absolute;
  top: 30px;
  left: 20px;
}
.container .logo .font_tushuguan {
  position: absolute;
  color: white;
  left: 50%;
  margin-left: -160px;
}
.shadow_tu {
  text-shadow: 3px 3px 1px rgba(255, 255, 255, 0.23);
  font-size: 50px;
}
.container .btn {
  position: absolute;
  top: 20px;
  right: 20px;
  
}
.container .btn .el-button{
  background-color:#aa0018;
}

/* 登陆成功显示的界面 */
.container .showUser {
  position: absolute;
  top: 20px;
  right: 20px;
}
/* 消除导航默认下划线 */
.container .el-tabs__nav-wrap::after {
  width: 0;
}
.container .nav {
  position: absolute;
  top: 80px;
  left: 38%;
  margin-left: -14px;
}
.container .nav .el-tabs .el-tab-pane {
  font-size: 20px;
}
.container .nav .el-tabs .el-tabs__item:hover {
  color: #c97880;
}
.container .el-tabs__item {
  color: aliceblue;
  font-size: 23px;
}
.container .el-tabs__nav-wrap {
  margin-right: -50px;
}
</style>